<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
    <title>大家来找茬</title>
    <style>
	 	body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{
	 		margin:0;padding:0;}
		body{font-size:20px;}
		img{border:none;}
		li{list-style:none;}
		input,select,textarea{outline:none;}
		textarea{resize:none;}
		a{text-decoration:none;}
		header{
			width:100%;
			height:36px;
			background-color: #37373c;
			line-height: 36px;
		}
		header h4{
			text-align:center;
			color:#fff;
			font-weight:400;
		}
		#view{
			position: absolute;
		}
    </style>
</head>
<body>
	<header>
		<h4>一带一路大找茬</h4>
	</header>
 	<div id="view">
  	</div>
 <script src="js/router.js"></script>
</body>
<script type="text/javascript">
	var
		view = document.getElementById("view");
        
    view.style.width = document.documentElement.clientWidth + "px";
    view.style.height = document.documentElement.clientHeight -36 + "px";
    console.log("widht:" + view.style.width);
    console.log("height:" + view.style.height);

	spaRouters.map('/home',function(transition){
		spaRouters.xhrpage("../html/home.html");
        spaRouters.asyncFun('js/home.js',transition)
  	});
  	spaRouters.map('/play',function(transition){
  		spaRouters.xhrpage("../html/play.html");
    	spaRouters.asyncFun('js/play.js',transition);
  	});
  	spaRouters.map('/bgintro',function(transition){
  		spaRouters.xhrpage("../html/bgintro.html");
        spaRouters.asyncFun('js/bgintro.js',transition)
  	});
  	spaRouters.map('/select',function(transition){
  		spaRouters.xhrpage("../html/select.html");
        spaRouters.asyncFun('js/select.js',transition)
  	});
  
    spaRouters.init()
</script>
</html>